var that;
class Tab {
    constructor(id){
        that = this;
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.section = this.main.querySelectorAll('section');
        this.init();

    }
    // 初始化
    init(){
        // init 初始化让相关事件绑定操作
        for (var i =0; i<this.lis.length;i++){
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
        }
    }


    // 1.切换功能
    toggleTab(){
            that.clearClass();
            this.className = 'liactive';
            that.section[this.index].className = 'conactive';
            
    }

    clearClass(){
        for(var i=0;i<this.lis.length;i++){
            this.lis[i].className = '';
            this.section[i].className = '';
        }
    }
    // 2.添加功能
    addTab(){

    }
}


new Tab('#tab')